class myJs{
	template=(item)=>{
		return `
		<tr>
			<td>
				<div class="custom-control custom-switch" >
					<input type="checkbox" class="custom-control-input" change-tab="switchTab(${item.id})" id="cb${item.id}" ${item.checked?'checked':''}>
					<label class="custom-control-label" for="cb${item.id}"> ${item.checked?'已选':'未选'}</label>
				</div>
			</td>
			<td>${item.id}</td>
			<td>${item.name}</td>
			<td>${item.num}</td>
			<td>￥${item.price}</td>
			<td>￥${item.num*item.price}</td>
			<td>${item.shijian}</td>
			<td>
				<a href="javascript:;"  my-click="add('+',${item.id})">增加</a>
				<a href="javascript:;"  my-click="add('-',${item.id})">减少</a>
				<a href="javascript:;" my-click="deleteItem(${item.id},)">删除</a>
			</td>
		</tr>
		`;
	}
	//原始列表数组
	arr=[
			{
				id:1,
				checked:true,
				name:"迪奥999",
				num:3,
				price:330,
				shijian:"2023-01-11 08:30:00"
			},
			{
				id:2,
				checked:false,
				name:"兰蔻196",
				num:1,
				price:320,
				shijian:"2023-01-11 08:30:00"
			}
		];
	//增加的下一个id
	nextId=3;
	nextName="";
	nextNum=0;
	nextPrice=0;
	
	//显示数据
	showList(){
		let str="";
		this.arr.forEach(item=>{
			str+=this.template(item);
		});
		document.getElementById("tbody").innerHTML=str;
		//把自定义方法激活
		this.listening();
	}
	//加1  减1
	add(flag,id){
		if(flag=="'+'"){
			this.arr.forEach(item=>{
				if(item.id==id){
					item.num++;
					return;
				}
			})
		}
		if(flag=="'-'"){
			this.arr.some(item=>{
				if(item.id==id){
					if(item.num<1){
						item.num=0;
						return;
					}else{
						item.num--;
						return;
					}
				}
			})
		}
		this.showList();
		this.totalMoneyFn();
	}
	
	//删除
	deleteItem(id){
		if(confirm("确定删除吗？")){
			this.arr=this.arr.filter(item=>item.id!=id)
		}
		this.showList();
		this.totalMoneyFn();
	}	

	//切换是否选中
	switchTab(id){
		this.arr.forEach(item=>{
			if(item.id==id){
				item.checked=!item.checked;
				return;
			}
		})
		if(this.arr.some(item=>!item.checked)){
			document.querySelector('[check-all]').checked=false;
		}else{
			document.querySelector('[check-all]').checked=true;
		}
		this.totalMoneyFn();
	}
	//全选/全不选
	checkAll(e){
		// console.log(e.checked);
		this.arr.forEach(item=>{
			item.checked=e.checked;
		})
		this.showList();
		this.totalMoneyFn();
	}
	//添加项目
	addItem(){
		this.nextName=document.getElementById("brandName").value;
		this.nextNum=document.getElementById("addNum").value;
		this.nextPrice=document.getElementById("addPrice").value;
		if(this.nextName.trim().length==0||parseInt(this.nextNum.trim())==0||parseFloat(this.nextPrice.trim())==0){
			alert("商品名、数量、价格均不可以为空");
			return;
		}
		this.arr=[
			...this.arr,
			{
				checked:true,
				id:this.nextId,
				name:this.nextName,
				num:this.nextNum,
				price:this.nextPrice,
				shijian:dayjs().format('YYYY-MM-DD HH:mm:ss')
			}
		]
		this.showList();
		this.totalMoneyFn();
		this.nextId++;
		this.nextName="";
		this.nextNum=0;
		this.nextPrice=0;
		document.getElementById("brandName").value="";
		document.getElementById("addNum").value=0;
		document.getElementById("addPrice").value=0;
	}
	//总金额
	totalMoneyFn(){
		let total= this.arr.reduce((prev,item)=>{
			if(item.checked){
				prev+=item.num*item.price
			}
			return prev;
		},0)
		document.getElementById("totalMoney").innerHTML=total.toFixed(2);
	}
	//页面整体的监听事件
	listening(){
		//捕获my-click事件    +1/-1  删除
		let myClickAction=()=>{
			let myClicks=document.querySelectorAll("[my-click]");
			for (let i = 0; i < myClicks.length; i++) {
				myClicks[i].addEventListener('click',e=>{
					let str=e.target.getAttribute('my-click');
					//分组查询
					const reg=/(.*)\((.*),(.*)\)/g;
					const res=reg.exec(str);
					//判断点击是加减还是删除
					if(res[1]=='add'){
						this.add(res[2],res[3]);
					}else{
						this.deleteItem(res[2]);
					}
				});
			}
		}
		myClickAction();
		//切换  已选/未选
		let changeTabFn=()=>{
			let changeTabs=document.querySelectorAll("[change-tab]");
			for (let i = 0; i < changeTabs.length; i++) {
				changeTabs[i].addEventListener("change",e=>{
					// console.log(changeTabs[i].getAttribute('change-tab'));
					// console.log(e.target.id.substring(2));
					this.switchTab(e.target.id.substring(2));
				})
			}
		}
		changeTabFn();
		//添加内容
		let addItemFn=()=>{
			let addsub=document.querySelector('[my-submit]');
			addsub.addEventListener('click',e=>{
				this.addItem();
			})
		}
		addItemFn();
		//全选
		let checkAllFn=()=>{
			let checkallbtn=document.querySelector('[check-all]');
			checkallbtn.addEventListener('change',e=>{
				// console.log(checkallbtn);
				this.checkAll(checkallbtn);
			})
		}
		checkAllFn();
	}
	//初始化函数
	star(){
		this.showList();
		this.totalMoneyFn();
	}
}
export default myJs;



